<template>
    <div class="monitoring-config">
        <el-card class="select-box">
            <el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-card>
        <!-- 站点配置 -->
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card>
                    <div class="grid-content bg-purple">
                        <div class="title">
                            <h3>站点配置</h3>
                            <div>
                                <el-button type="primary" @click="addGroupFormVisible = true">添加站点</el-button>
                                <el-button type="danger" @click="handleDeleteSite">删除站点</el-button>
                            </div>
                        </div>
                        <el-table :data="siteData" stripe style="width: 100%">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="name" label="站点名称"></el-table-column>
                            <el-table-column prop="id" label="站点ID"></el-table-column>
                            <el-table-column prop="description" label="描述"></el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 统计项与监测量配置 -->
        <el-card style="margin-top: 20px;">
            <el-row :gutter="20">
                <el-col :span="9">
                    <div class="grid-content bg-purple-light">
                        <h3>统计项与监测量配置</h3>
                        <div v-for="(item, index) in statisticItems" :key="index" class="clearfix">
                            <div slot="header" class="clearfix-header">
                                <span>{{ item.title }}</span>
                                <span style="float: right; font-size: 13px;">ID: {{ item.id }}</span>
                            </div>
                            <div>{{ item.description }}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="15">
                    <div class="grid-content bg-purple-light">
                        <h3>选择监测量</h3>
                        <el-select v-model="selectedMonitor" placeholder="请选择监测量">
                            <el-option v-for="option in monitorOptions" :key="option.value" :label="option.label"
                                :value="option.value"></el-option>
                        </el-select>
                        <div style="margin-top: 20px;">
                            <el-button type="primary" @click="saveAssociation">保存关联</el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-card>

        <!-- 水质限值配置 -->
        <el-card style="margin-top: 20px;">
            <el-row :gutter="20">
                <el-col :span="24">
                    <div class="grid-content bg-purple-light">
                        <div class="title">
                            <h3 class="">水质限值配置</h3>
                            <el-button type="primary" @click="handleAddLimit">添加监测量</el-button>
                        </div>
                        <el-table :data="limitData" stripe style="width: 100%">
                            <el-table-column prop="name" label="监测量名称"></el-table-column>
                            <el-table-column prop="upperLimit" label="上限值"></el-table-column>
                            <el-table-column prop="lowerLimit" label="下限值"></el-table-column>
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <el-button type="text" size="small"
                                        @click="handleEditLimit(scope.row)">编辑</el-button>
                                    <el-button type="text" size="small"
                                        @click="handleDeleteLimit(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </el-card>

        <!-- 水质限值配置 -->
        <el-card style="margin-top: 20px;">
            <el-row :gutter="20">
                <el-col :span="24">
                    <div class="grid-content bg-purple-light">
                        <div class="title">
                            <h3 class="">操作记录</h3>
                        </div>
                        <el-table :data="limitData" stripe style="width: 100%">
                            <el-table-column prop="time" label="操作时间"></el-table-column>
                            <el-table-column prop="statusType" label="操作类型"></el-table-column>
                            <el-table-column prop="lowerLimit" label="操作人"></el-table-column>
                            <el-table-column prop="content" label="操作内容">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </el-card>

        <!-- 添加站点 -->
        <el-dialog v-model="addGroupFormVisible" align-center title="添加站点" width="600">
            <el-input placeholder="请输入站点名称或编号搜索" size="large" v-model="addGroupForm.searchQuery"
                @keyup.enter="handleSearch">
                <template #append>
                    <el-button icon="Search" @click="handleSearch"></el-button>
                </template>
            </el-input>
            <el-table :data="siteData" stripe style="width: 100%;margin-top: 20px;">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="name" label="站点名称"></el-table-column>
                <el-table-column prop="id" label="站点ID"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
            </el-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addGroupFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addGroupFormVisible = false">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- Add monitoring quantity -->
        <el-dialog v-model="addMQFormVisible" align-center title="添加站点" width="600">
            <el-form ref="formRef" :model="addMQForm" :rules="rules" status-icon>
                <el-form-item label="检测量名称" label-width="100" prop="name">
                    <el-input placeholder="请输入检测量名称" v-model="addMQForm.name"></el-input>
                </el-form-item>
                <el-form-item label="上限值" label-width="100" prop="upperlimit">
                    <el-input placeholder="请输入上限值" v-model="addMQForm.upperlimit"></el-input>
                </el-form-item>
                <el-form-item label="下限值" label-width="100" prop="lowerlimit">
                    <el-input placeholder="请输入下限值" v-model="addMQForm.lowerlimit"></el-input>
                </el-form-item>
                <!-- <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                </el-form-item> -->
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addMQFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm(formRef)">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const formRef = ref(null);
const addGroupFormVisible = ref(false);
const addMQFormVisible = ref(false);
const addMQForm = ref({
    name: '',
    upperlimit: '',
    lowerlimit: ''
})
const addGroupForm = ref({
    searchQuery: '',
})

// 表单验证规则
const rules = reactive({
    name: [
        { required: true, message: '请输入检测量名称', trigger: 'blur' }
    ],
    upperlimit: [
        { required: true, message: '请输入上限值', trigger: 'blur' }
    ],
    lowerlimit: [
        { required: true, message: '请输入下限值', trigger: 'blur' }
    ]
});
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
// 站点数据
const siteData = ref([
    { id: 'SITE001', name: '清水湾监测站', description: '位于清水湾区域的水质监测站点' },
    { id: 'SITE002', name: '龙湖监测站', description: '位于龙湖区域的水质监测站点' },
    { id: 'SITE003', name: '青山监测站', description: '位于青山区域的水质监测站点' }
]);

// 统计项数据
const statisticItems = ref([
    { id: 'STAT001', title: '日均水质指标', description: '记录每日水质指标的平均值' },
    { id: 'STAT002', title: '水质异常统计', description: '统计水质超标和异常情况' },
    { id: 'STAT003', title: '水质变化趋势', description: '分析水质指标的变化趋势' }
]);

// 监测量选项
const monitorOptions = ref([
    { value: 'option1', label: '选项1' },
    { value: 'option2', label: '选项2' },
    { value: 'option3', label: '选项3' }
]);


const submitForm = (formEl) => {
    formRef.value.validate((valid) => {
    if (valid) {
      alert('提交成功!');
      // 在这里可以添加提交逻辑
    } else {
      console.log('验证失败，请检查输入');
      return false;
    }
  });
}


// 当前选中的监测量
const selectedMonitor = ref('');

// 水质限值数据
const limitData = ref([]);

// 方法
function handleAddSite() {
    console.log('Adding new site');
}

function handleDeleteSite() {
    console.log('Deleting selected site');
}

function saveAssociation() {
    console.log('Saving association');
}

function handleAddLimit() {
    addMQFormVisible.value = true;
}

function handleEditLimit(row) {
    console.log('Editing limit:', row);
}

function handleDeleteLimit(row) {
    console.log('Deleting limit:', row);
}

const handleSearch = () => {
    console.log('Searching for sites with query:', addGroupForm.value.searchQuery);
};
</script>

<style scoped lang="scss">
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clearfix {
    border: 1px solid #eaeef5;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px 15px;
}

.clearfix-header {
    display: flex;
    margin-bottom: 10px;
    flex-direction: column;

    span:nth-child(2) {
        margin-top: 5px;
    }
}

.select-box {
    margin-bottom: 20px;
}
</style>